<template>
  <div>
    <DocHeader :title="title" fromDoc="picc" :diagnosis="true"></DocHeader>
    <div class="docMain">
      <div>
        患者因病情需要拟行中心静脉置管，置管前需家属了解行置管术中和术后可能要发生的并发症，签字后方可进行操作。
      </div>
      <div>一、适应症：</div>
      <div>
        <div>1．输液需要超过一周以上者</div>
        <div>
          2．输液时需要使用一些对外周静脉刺激性较大的药物（如化疗药、大剂量补钾、TPN等）
        </div>
        <div>3．危重病人抢救时</div>
      </div>
      <div>二、优点：</div>
      <div>
        <div>1．保护病人的外周静脉</div>
        <div>2．可减少反复经外周静脉穿刺输液的痛苦</div>
        <div>3．是抢救危重病人的重要输液途径</div>
        <div>4．可长期保留在血管内</div>
        <div>5．病人活动方便，利于提高生活质量</div>
      </div>
      <div>三、可能出现的并发症：</div>
      <div>
        <div>1．个体差异不同，血管变异，可能会出现穿刺失败</div>
        <div>2．导管易位</div>
        <div>3．出血或血肿</div>
        <div>4．导管栓塞</div>
        <div>5．导管堵塞</div>
        <div>6．感染</div>
        <div>7．液体溢出</div>
        <div>8．纤维包囊膜形成</div>
        <div>9．不能耐受置入性的设备</div>
        <div>10．静脉炎</div>
        <div>11．血栓栓塞</div>
        <div>12．血栓形成</div>
      </div>
      <div>
        以上情况请家属考虑。另外，此操作的成功率与患者的静脉状况有直接关系，家属确认已阅读本知情书并认可可能出现操作失败的风险，同意支付全款实施操作，并承担可能出现操作失败时的经济风险。如同意使用，请签字。
      </div>
      <div class="flexBox">
        <div class="item">
          患方签字：
          <el-input
            v-model="pageData.inputValue1"
            style="width: 200px"
          ></el-input>
        </div>
        <div class="item">
          与患者关系：
          <el-input
            v-model="pageData.inputValue2"
            style="width: 200px"
          ></el-input>
        </div>
      </div>
      <div class="flexBox">
        <div class="item">
          护士签字：
          <img
            v-if="signPhoto(pageData.sign, 'nursingDocument', docType)"
            :src="
              'data:image/png;base64,' +
              signPhoto(pageData.sign, 'nursingDocument', docType)
            "
            alt=""
            style="display: block; max-width: 98%; height: 24px"
            @click="handleSignImgClear('sign')"
          />
          <el-input
            v-else
            v-model="pageData.sign"
            style="width: 100px"
            @blur="handleSignInputBlur('sign')"
          ></el-input>
        </div>
        <div class="item">
          日期：
          <DateSelection
            v-model="pageData.time"
            value-format="yyyy-MM-dd HH:mm"
            :simple-op="true"
            :date-picker-show="true"
            :date-show="true"
            :no-clear="true"
            :hasBorder="false"
            :needTimeIcon="false"
            :display-num="!pageData.time"
            style="padding: 0"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DateSelection from '@/components/DateSelection/indexV2.vue'
import { useSign } from '@/hooks'
import { getStoreFromInstance } from '@/utils/instance'

import DocHeader from '../DocHeader.vue'

export default defineComponent({
  components: {
    DocHeader,
    DateSelection
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      hospitalName: window.hospitalName,
      pageData: {}
    })

    const baseData = {
      inputValue1: '',
      inputValue2: '',
      sign: '',
      time: +new Date()
    }

    const store = getStoreFromInstance()

    const { signPhoto, queryUserSignByName } = useSign()

    const user = computed(() => store.getters.user)

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(cloneDeep(baseData), jsonText)
      } else {
        nextTick(() => {
          const pageData = cloneDeep(baseData)
          pageData.sign = user.value.name
          queryUserSignByName(
            [user.value.name],
            'nursingDocument',
            props.docType
          )
          state.pageData = pageData
        })
      }
    }

    function getParams() {
      return state.pageData
    }

    function handleSignInputBlur(key) {
      queryUserSignByName(
        [state.pageData[key]],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear(key) {
      state.pageData[key] = ''
    }

    onMounted(() => {
      initData()
    })

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
.docMain {
  line-height: 2em;
  margin-top: 10px;
}

.textIndent2 {
  text-indent: 2em;
}

.flexBox {
  display: flex;
  margin-top: 30px;

  .item {
    width: 50%;
    display: flex;
    align-items: center;
  }
}

::v-deep {
  .el-input .el-input__inner {
    border: none;
    border-radius: 0;
    text-align: left;
    // border-bottom: 1px solid #000;
    padding: 0 4px;
    color: #000;
  }
}
</style>
